<template>
  <view>
    <view class="title">
      今日请假情况
    </view>
    <view class="table">
    				<view class="tr">
    					<view class="th">请假人</view>
    					<view class="th">部门</view>
    					<view class="th">请假事由</view>
    				</view>
    				<view class="tr" v-for="item in list" :key="item.id">
    					<view class="td">{{item.nickName}}</view>
    					<view class="td">{{item.dept}}</view>
    					<view class="td">{{item.remark}}</view>
    				</view>
    </view>
    
  </view>
</template>

<script>
  import dayjs from 'dayjs'
  import { listDuty } from "@/api/system/duty";
  import { listUser } from "@/api/system/user";
  export default {
    data() {
      return {
         query: {
                        offdutyStat: 1,
                        offdutyDate: dayjs(new Date()).format('YYYY-MM-DD'),
                    },
                    list: [],
      }
    },
    onReady(){
      this.getToDayDuty()
    },
    methods: {
       async getToDayDuty() {
                    listDuty(this.query).then(res=>{
                      // console.log(res)
                    res.rows.forEach(async(item)=>{
                   let deptlist= await listUser({userName:item.userName})
                  //  使用$set给请假列表添加一个响应式部门属性，
                   this.$set(item, 'dept', deptlist.rows[0].dept.deptName)
                    })
                  //   console.log(res);
                    this.list=res.rows
                    // console.log(this.list);
                    })
              }
    }
  }
</script>

<style scoped>
  .title{
    text-align: center;
    margin: 10px auto;
    font-size: 18px;
  }
	.table {
		width: 100%;
		border-radius: 8rpx;
		display: table;
		border: 1px solid #f7f7f7;
		border-collapse: collapse;
	}

	.th {
    background: #7c7c7c;
		text-align: center;
		color: #FFFFFF;
		padding: 20rpx 0;
		font-weight: bolder;
		display: table-cell;
		border: 1px solid #f7f7f7
	}

	.td {
		text-align: center;
		background: #FFFFFF;
		padding: 20rpx 0;
		display: table-cell;
		border: 1px solid #f7f7f7
	}

	.tr {
		display: table-row;
	}
</style>
